import React, { useEffect, useState } from 'react'
import { Button } from 'antd';
import { useNavigate } from 'react-router-dom'

import { jumpTo } from '../../utils/jump'
import { removeAllCache } from '../../utils/cache/'

import styles from './index.module.css'


function QuitPopover(props) {
    //父控件传过来的值
    const { functionPopoverCancel } = props;
    //导航
    const navigate = useNavigate()
    const [btnStr, setBtnStr] = useState('确定');
    const [load, setLoad] = useState(false);

    //[]空数组相当于componentDidMount
    useEffect(() => {

        //返回的函数相当于unmountComponentAtNode
        return () => {

        }
    }, []);

    function clickConfirm() {
        setLoad(true)
        setBtnStr('退出..')
        setTimeout(() => {
            removeAllCache()
            functionPopoverCancel();
            setLoad(false)
            setBtnStr('确定')
            jumpTo(navigate, '/', true, null)
        }, 2000);
    }

    function clickCancel() {
        functionPopoverCancel();
    }

    return (
        <div className={styles.root}>
            <div className={styles.title}>
                <span>确认退出吗?</span>
            </div>
            <div className={styles.btn_box}>
                <Button loading={load} onClick={clickConfirm} type="primary" size={'small'}>{btnStr}</Button>
                <Button style={{ marginLeft: '10px' }} onClick={clickCancel} size={'small'} >取消</Button>
            </div>
        </div>
    )
}


export default QuitPopover

